import { useState } from 'react';
import { Model } from '../Model';
import { cancelInstanceFlows } from '../cancelFlowMiddleware';
import { destroy } from 'mobx-state-tree';
import { observer } from 'mobx-react-lite';
import * as styles from '../style.module.less';

function Setting_() {
  const [m] = useState(() => {
    return Model.create();
  })
  return (
    <div >
      <h1>setting {m.count}</h1>
      <div className={styles.operations}>
        <button className="rounded-md placeholder-indigo-50 bg-red-300 p-2 font-bold" onClick={() => m.doFlow()}>doFlow</button>
        <button onClick={() => cancelInstanceFlows(m)}>cancel flow</button>
        {/* 需要核实其 flow 处于被 middleware pending 的状态，destroy 模型实例是否会完全释放资源 */}
        <button onClick={() => destroy(m)}>destroy</button>
        {m.unsaved && (
          <div>
            <span>存在未保存状态</span>
            <button onClick={() => m.commit()}>保存</button>
          </div>
        )}
      </div>
    </div>
  )
}

const Setting = observer(Setting_);

export default Setting;
